# tools.bundlerChain

- **Type:**

```ts
type BundlerChainFn = (
  chain: RspackChain,
  utils: ModifyBundlerChainUtils,
) => Promise<void> | void;
```

- **Default:** `undefined`

import RspackChain from '@en/shared/rspackChain.mdx';

<RspackChain />

You can use rspack-chain to modify the default Rspack config through `tools.bundlerChain`. Its value is a function that takes two arguments:

- The first argument is a `rspack-chain` instance, which you can use to modify the Rspack config.
- The second argument is an utils object, including `env`, `isProd`, `CHAIN_ID`, etc.

> `tools.bundlerChain` will be executed earlier than [tools.rspack](/config/tools/rspack), so it will be overridden by `tools.rspack`.

:::tip
The built-in Rspack config in Rsbuild may change with iterations, and these changes won't be reflected in semver. Therefore, your custom config may become invalid when you upgrade Rsbuild.
:::

## Examples

Please refer to: [RspackChain examples](/guide/configuration/rspack#use-rspack-chain).

## Utils

### env

- **Type:** `'development' | 'production' | 'test'`

The `env` parameter can be used to determine whether the current environment is development, production or test. For example:

```js
export default {
  tools: {
    bundlerChain: (chain, { env }) => {
      if (env === 'development') {
        chain.devtool('cheap-module-eval-source-map');
      }
    },
  },
};
```

### isDev

- **Type:** `boolean`

Used to determine whether the current build is a development build, such as:

```js
export default {
  tools: {
    bundlerChain: (config, { isDev }) => {
      if (isDev) {
        config.devtool = 'eval-cheap-source-map';
      }
      return config;
    },
  },
};
```

### isProd

- **Type:** `boolean`

Used to determine whether the current build is a production build, such as:

```js
export default {
  tools: {
    bundlerChain: (chain, { isProd }) => {
      if (isProd) {
        chain.devtool('source-map');
      }
    },
  },
};
```

### target

- **Type:** `'web' | 'node' | 'web-worker'`

The `target` parameter can be used to determine the build target environment. For example:

```js
export default {
  tools: {
    bundlerChain: (chain, { target }) => {
      if (target === 'node') {
        // ...
      }
    },
  },
};
```

### isServer

- **Type:** `boolean`

Determines whether the target environment is `node`, equivalent to `target === 'node'`.

```js
export default {
  tools: {
    bundlerChain: (chain, { isServer }) => {
      if (isServer) {
        // ...
      }
    },
  },
};
```

### isWebWorker

- **Type:** `boolean`

Determines whether the target environment is `web-worker`, equivalent to `target === 'web-worker'`.

```js
export default {
  tools: {
    bundlerChain: (chain, { isWebWorker }) => {
      if (isWebWorker) {
        // ...
      }
    },
  },
};
```

### rspack

- **Type:** `Rspack`

The Rspack instance. For example:

```js
export default {
  tools: {
    bundlerChain: (chain, { rspack }) => {
      chain.plugin('extra-define').use(rspack.DefinePlugin, [
        {
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          },
        },
      ]);
    },
  },
};
```

### HtmlPlugin

- **Type:** `typeof import('html-rspack-plugin')`

The default export of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin).

```js
export default {
  tools: {
    bundlerChain: (chain, { HtmlPlugin }) => {
      console.log(HtmlPlugin);
    },
  },
};
```

## CHAIN_ID

Some common Chain IDs are predefined in the Rsbuild, and you can use these IDs to locate the built-in Rule or Plugin.

:::tip
Please note that some of the rules or plugins listed below are not available by default. They will only be included in the Rspack or webpack configuration when you enable specific options or register certain plugins.

For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is registered.
:::

### CHAIN_ID.RULE

| ID            | Description                                                               |
| ------------- | ------------------------------------------------------------------------- |
| `RULE.JS`     | Rule for `js` and `ts`                                                    |
| `RULE.SVG`    | Rule for `svg`                                                            |
| `RULE.CSS`    | Rule for `css`                                                            |
| `RULE.LESS`   | Rule for `less`                                                           |
| `RULE.SASS`   | Rule for `sass`                                                           |
| `RULE.YAML`   | Rule for `yaml`                                                           |
| `RULE.WASM`   | Rule for `WASM`                                                           |
| `RULE.FONT`   | Rule for `font`                                                           |
| `RULE.IMAGE`  | Rule for `image`                                                          |
| `RULE.MEDIA`  | Rule for `media`                                                          |
| `RULE.VUE`    | Rule for `vue` (requires [Vue plugin](/plugins/list/plugin-vue))          |
| `RULE.SVELTE` | Rule for `svelte` (requires [Svelte plugin](/plugins/list/plugin-svelte)) |
| `RULE.STYLUS` | Rule for `stylus` (requires [Stylus plugin](/plugins/list/plugin-stylus)) |

### CHAIN_ID.ONE_OF

`ONE_OF.[ID]` can match a certain type of rule in the rule array.

| ID                  | Description                                                        |
| ------------------- | ------------------------------------------------------------------ |
| `ONE_OF.SVG_URL`    | Rules for SVG, output as a separate file                           |
| `ONE_OF.SVG_INLINE` | Rules for SVG, inlined into bundles as data URIs                   |
| `ONE_OF.SVG_ASSETS` | Rules for SVG, automatic choice between data URI and separate file |

### CHAIN_ID.USE

`USE.[ID]` can match a certain loader.

| ID            | Description                        |
| ------------- | ---------------------------------- |
| `USE.SWC`     | correspond to `builtin:swc-loader` |
| `USE.STYLE`   | correspond to `style-loader`       |
| `USE.POSTCSS` | correspond to `postcss-loader`     |

See [Custom loader](/guide/configuration/rspack#custom-loader) for more details.

### CHAIN_ID.PLUGIN

`PLUGIN.[ID]` can match a certain Rspack or webpack plugin.

See [Custom plugin](/guide/configuration/rspack#custom-plugin) for more details.

### CHAIN_ID.MINIMIZER

`MINIMIZER.[ID]` can match a certain minimizer.

| ID              | Description                                                                                                               |
| --------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `MINIMIZER.JS`  | correspond to [SwcJsMinimizerRspackPlugin](https://rspack.rs/plugins/rspack/swc-js-minimizer-rspack-plugin)               |
| `MINIMIZER.CSS` | correspond to [LightningCssMinimizerRspackPlugin](https://rspack.rs/plugins/rspack/lightning-css-minimizer-rspack-plugin) |
